@charset 'utf-8';

@import 'reset';
@import 'iconfont';
@import 'base';
@import 'swiper';

body,
html {
    @include wh($full,$full);
    .web {
        @include wh($full,$full);
        position: relative;
    }
}

header {
    position: absolute;
    top: 0;
    background: #fff;
    button {
        @include wh(half(123px),half(57px));
        border-radius: 7px;
        border: 1px solid #FF9344;
        background: transparent;
        margin-top: half(50px);
        margin-left: half(26px);
        line-height: half(56px);
    }

    .header-title {
        @include wh(half(120px),half(57px));
        text-align: center;
        margin: half(48px) auto 0;
        p {
            font-size: half(28px);
            line-height: half(57px);
        }
    }
}

.header-position {
    @include wh(half(158px),half(54px));
    border: 1px solid #FF9344;
    text-align: center;
    line-height: 27px;
    float: right;
    margin-right: half(22px);
    margin-top: half(48px);
    background: url("../../img/index-searchico.png") no-repeat right half(12px) center;
    background-size: 15px 8px;
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        outline: none;
        @include wh($full,$full);
        background: transparent;
        font-size: half(25px);
        padding: 0 0 0 half(14px);
        line-height: 27px;
        vertical-align: top;
    }
}

.header-search {
    @include wh(r(264),half(50px));
    border: 1px solid #ff9344;
    border-radius: 25px;
    padding: 0 8px;
    box-sizing: border-box;
    line-height: 25px;
    margin: 26px auto 0;
    input[type="text"] {
        @include wh(r(186),$full);
        border: none;
        outline: none;
        vertical-align: top;
        background: transparent;
        font-size: half(20px);
        line-height: 25px;
        border-radius: 25px;
        text-indent: 2px;
    }

    i {
        font-size: half(28px);
        color: #FF9344;
    }
}

.header-icon {
    @include wh(half(50px),half(50px));
    margin-top: half(50px);
    margin-right: half(22px);
    i {
        font-size: half(50px);
        color: transparent;
        vertical-align: text-top;
        -webkit-text-stroke: 1px #FF9344;
        &.loved {
            color: #FF9344;
        }
    }
}

.titlebar {
    @include wh($full,r(92));
    .titlebar-ico {
        @include wh(r(30),r(30));
        margin: r(15) r(9) 0 r(21);
        img {
            @include wh($full,$full);
            vertical-align: middle;
        }
    }

    .titlebar-title {
        p {
            font-size: r(28);
            line-height: r(92);
            color: #000000;
        }
    }

    .titlebar-more {
        height: r(92);
        margin-right: r(20);
        a {
            display: inline-block;
            font-size: r(24);
            line-height: r(92);
            vertical-align: top;
            color: black;
        }

        i {
            font-size: r(24);
            line-height: r(92);
            color: #FF9344;
            margin-left: r(10);
        }
    }
}

section {
    width: $full;
    background: #fff;
    position: absolute;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    bottom: 68px;
}

footer {
    @include wh($full,half(136px));
    background: #fff;
    position: absolute;
    bottom: 0;
    ul {
        li {
            @include wh(25%,$full);
            float: left;
            text-align: center;
            padding-top: half(15px);
            box-sizing: border-box;
            &:hover .iconfont {
                color: #eb883f;
            }
            a {
                color: black;
                p {
                    font-size: half(26px);
                }
                .iconfont {
                    font-size: half(71px);
                    margin-top: half(9px);
                    color: transparent;
                    -webkit-text-stroke: 1px #FF9344;
                    &.active {
                        color: #FF9344;
                    }
                }
            }
        }
    }
}
